<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="background: url('/images/0.png');background-size: 100% 100%">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
    #app{
        width: 500px;
        height: 500px;
        border: 0px solid;
        margin: 0px auto;
        margin-top: 300px;
        padding: initial;
    }
    #reset{
        margin-left: 80px;
    }
    #sub{
        margin-left: 80px;
    }
</style>

<div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-width="100px" class="demo-ruleForm">
        <b>
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
        </b>
        <b>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
        </b>

        <el-form-item>
            <el-button id="sub" type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button id="reset" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            rules: {
                username: [
                    {required: true, message: '请输入用户账户', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入用户密码', trigger: 'blur'},
                ],
            },
            ruleForm: {}
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("/User/Login",this.ruleForm).then(resp=>{
                            if (resp.data.code===2000){
                                location.href="index.html"
                            }else {
                                this.$message.error("登录失败！")
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>

</html>